//
// Variables
//
@navigation-text: #000;
@navigation-bg: rgb(245, 245, 245);
@navigation-border: rgb(195, 195, 195);


//
// Trees Variables
//
@tree-indentation: 0.5em;
@tree-border: @navigation-border;


//
// Trees
//
.list-tree,
.list-tree ul {
	margin-left: @tree-indentation;
	padding: 0;
	list-style: none;
	position: relative;
	&:before {
		content: "";
		display: block;
		width: 0;
		position: absolute;
		top: 0;
		bottom: 1em;
		left: 0;
		margin-bottom: -2px;
		border-left: 1px dotted @tree-border;
	}
}
.list-tree {
	li {
		&.active {
			> .list-tree-group,
			> .list-tree-group a {
				.text-danger();
			}
		}
		&:before {
			content: "";
			display: block;
			width: @tree-indentation * 1.6;
			height: 0;
			border-top: 1px dotted @tree-border;
			margin-top: -2px;
			position: absolute;
			top: 1em;
			left: 2px;
		}
		&:last-child:before {
			background: white;
			height: auto;
			top: 1em;
			left: 0;
			bottom: 0;
		}
		margin: 0;
		padding-left: @tree-indentation * 2.5;
		line-height: 1.75em;
		position: relative;
	}
}
.list-tree-value {
	font-weight: bold;
}
.list-tree-control {
	&:active,
	&:focus,
	&:hover {
		text-decoration: none;
	}
	> .fa {
		font-size: 1.1em;
		display: inline-block;
		text-align: center;
		width: @tree-indentation * 2;
	}
	&.list-tree-control-open > .fa:before {
		content: "\f0d7";
	}
	&.list-tree-control-closed > .fa:before {
		content: "\f0da";
	}
}


table#typo3-tree {
	margin: 10px 0 20px 10px;
	width: 95%;
	vertical-align: middle;

	tr {
		td {
			padding: 0;

			img {
				vertical-align: middle;
				&.c-recIcon {
					margin-right: 1px;
				}
			}
		}
	}

	a {
		text-decoration: none;
	}

}

p.c-refresh img {
	margin-right: 7px;
	vertical-align: middle;
}

#typo3-pagetree #typo3-docheader div.buttonsright,
#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader div.buttonsright {
	margin-right: 3px;
}

body#typo3-alt-db-navframe-php div.c-notice {
	border: 1px solid black;
	margin-top: 5px;
	margin-bottom: 10px;
	padding: 5px 5px 5px 5px;
	width: 95%;
}

//
// Configuration trees, used in Admin Tools => Configuration
//

table.t3-tree-config {
	background: #ececec;
	background-image: linear-gradient(center top, #ffffff 0px, #ececec 100px);
	border: 1px solid #adadad;
	min-width: 500px;

	.t3-tree-config-header {
		text-align: left;
	}
}

//
// AJAX Page Tree
//

body#typo3-pagetree,
body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
	margin: 0;
	padding: 0;
}

body#typo3-pagetree #typo3-inner-docbody,
body#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-inner-docbody {
	padding: 0 0 10px 0;
}

ul.tree {
	line-height: 12px;
	list-style: none;
	clear: both;
	margin: 16px 0 0 10px;
	padding: 0;

	a {
		text-decoration: none;
	}

	a.pm {
		cursor: pointer;
	}

	div.treeLinkItem {
		display: block;
		min-height: 16px;
		padding-right: 2px;
	}

	ul {
		padding: 0 0 0 19px;
		margin: 0;
		list-style: none;

		li {
			padding: 0;
			margin: 0;
			white-space: nowrap;
			list-style: none;
		}

		li.active  {
			div.treeLinkItem {
				background-color: #fff;
				boder: 1px solid #d7d7d7;
				border-right: 0;
			}

			li div.treeLinkItem {
				margin: 0;
				background-color: transparent;
				border-width: 0;

			}
		}

		li.expanded {
			ul {
				background: transparent url('../../../../icons/gfx/ol/line.gif') left top repeat-y;
			}
		}
	}
}



ul.tree ul li.last > ul {
	background: none;
}


ul.tree li.active span a,
ul.tree ul li.active span a {
	font-weight: bold;
}

ul.tree li.active ul span a,
ul.tree ul li.active ul span a {
	font-weight: normal;
}

ul #pages0_0 > ul {
	padding-left: 0;
}

//
// active tree items, we have to work against the border: 1px here,
// otherwise tree elements would take too much space
//

ul.tree li.active div.treeLinkItem {
	margin: -1px 0 -1px -1px;
}

span.dragIcon {
	display: inline-block;
	height: 16px;
}

ul.tree div.treeLinkItem span.dragId,
ul.tree div.treeLinkItem span.dragTitle,
ul.tree div.treeLinkItem img {
	vertical-align: middle;
}

ul.tree div.treeLinkItem span.dragIcon {
	vertical-align: top;
}
#dragIcon {
	position: absolute;
	visibility: hidden;
	z-index: 20;
}

#treeFilterBox {
	background: url('../../../../icons/gfx/filter_bg.gif') 0 -2px no-repeat;
	background-color: #dadada;
	display: none;
	height: 25px;
	position: absolute;
	top: 49px;
	left: 0;
	right: 0;
	width: auto;
	z-index: 3;
}

#searchBubble {
	padding-left: 10px;
}

#treeFilter {
	margin: 6px 0 0 17px !important;
	height: 16px;
	width: 160px;
}

#treeFilterReset {
	position: absolute;
	top: 5px;
	left: 192px;
	border: 0;
	cursor: pointer;
	visibility: hidden;
}

#typo3-pagetree #typo3-docheader img,
#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader img {
	margin: 2px;
}

// Sprite icons for tree lines. Single lines need 6px padding. Can also be used directly inside .table

.t3-icon-treeline {
	display: block;
	float: left;
	margin-top: -6px;
	margin-bottom: -6px;
	padding: 0;
	height: 30px;
	white-space: nowrap;
	overflow: hidden;
}

//
// Tree
//

body#typo3-pagetree,
body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
	background: #ebebeb;
}

#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docbody,
#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader-row1,
#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader-row2,
.typo3-pagetree-indicatorBar-item,
#typo3-pagetree-topPanelItems,
#typo3-pagetree-topPanel .typo3-pagetree-topPanel-item,
#typo3-pagetree-treeContainer,
#typo3-pagetree .x-panel-tbar,
#typo3-pagetree-deletionDropZone .x-panel-body {
	background-position: right;
	background-repeat: repeat-y;
}

#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docbody,
#typo3-pagetree-treeContainer {
	border-right: 1px solid @navigation-border;
	background-color: @navigation-bg;
}

table#typo3-tree tr:hover {
	background-color: #d7dbe2;
}

//
// AJAX Page Tree
//

#dragIcon {
	filter: alpha(opacity=50);
	opacity: 0.5;
	white-space: nowrap;
}

#treeFilter {
	background: transparent;
	border: 0;
}

#tree-toolbar-filter-item {
	display: inline-block;
	height: 22px;
	width: 20px;
}

#tree-toolbar-filter-item.active {
	background-image: url("../../../../icons/gfx/toolbar_item_active_bg.png")
}
